<template>
    <div class="home-header">
        <div class="header-icon">OA管理系统</div>
        <div class="navigator">
            <div class="user-bar">
                <template v-if="$store.state.loginUser!=null">
                    <ul style="float: right">
                        <li>
                            <img :src="'/' + this.$store.state.loginUser.photo" alt="" class="user-icon"/>
                            <span style="position: relative;top: -6px">{{$store.state.loginUser.empName}}</span>
                        </li>
                        <li style="position: relative">
                            <el-icon class="sharp" :class="{'active':active}" @click="activeClick"><arrow-down /></el-icon>
                            <div class="user-panel" v-show="active">
                                <div class="header">
                                    主次账号切换
                                </div>
                                <ul class="user-list">
                                    <li>
                                        <div class="icon-bar">
                                            <img :src="'/' + this.$store.state.loginUser.photo" alt="">
                                        </div>
                                        <div class="aaa">
                                            <div class="aaaa">
                                                {{$store.state.loginUser.empName}}
                                            </div>
                                            <div class="aaaa">
                                                {{$store.state.loginUser.position}}
                                            </div>
                                        </div>
                                        <el-icon size="20px" color="rgb(63,137,220)" style="font-size: 24px;margin-left: 3px;"><success-filled /></el-icon>
                                    </li>
                                </ul>
                                <div class="foot">
                                    <el-button type="text" :icon="SwitchButton" style="color: darkgray" @click="logoutClick">退出</el-button>
                                </div>
                            </div>
                        </li>
                    </ul>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
    import {SwitchButton} from '@element-plus/icons-vue'
    import {loginOut} from "../../network/login/login";
    export default {
        name: "HomeHeader",
        data(){
            return {
                currentUser: null,
                active: false
            }
        },
        setup(){
            return{
                SwitchButton
            }
        },
        methods:{
            logoutClick(){
                loginOut().then(vo=>{
                    this.$operate.confirm({
                        hint: '你确认要退出当前登录吗？',
                        title: '退出登录',
                        executeFn: ()=>{
                            this.$response.handle({
                                data: vo,
                                success: '退出登录成功',
                                successFn: ()=>{
                                    localStorage.setItem('tokenStr',null);
                                    this.$router.push('/login');
                                }
                            })
                        }
                    })
                })
            },
            activeClick(){
                this.active = !this.active;
            }
        },
        created() {
            this.currentUser = this.$store.state.loginUser;
        }
    }
</script>

<style scoped>
.user-list li:hover{
    background: #817b7b2e;
    cursor: pointer;
}
    .aaa{
        float: left;
        width: 180px;
    }
    .aaaa{
        height: 25px;
        line-height: 25px;
        font-size: 9px;
    }
    .icon-bar{
        width: 60px;
        height: 50px;
        float: left;
        margin: 0 10px 0 5px;
    }
    .icon-bar img{
        width: 50px;
        height: 50px;
        margin: 0px auto;
        border-radius: 50%;
        display: block;
    }
    *{
        /*border: 1px solid red;*/
        box-sizing: border-box;
    }
    .home-header{
        width: 100%;
        height: 100%;
        display: flex;
        color: white;
        line-height: 60px;
    }
    .header-icon{
        border-right: 1px solid #e3d9d93b;
        width: 200px;
        height: 100%;
        color: white;
        font-family: '华文彩云';
        font-size: 24px;
        text-align: center;
        line-height: 60px;
        font-weight: 500;
    }
    .navigator{
        font-size: 13px;
        /*width: 100%;*/
        width: 1332px;
        height: 100%;
    }
    .user-bar{
        min-width: 240px;
        height: 100%;
        float: right;
    }
    .user-icon{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        position: relative;
        top: 10px;
        margin: 0 6px;
    }
    .scrollbar-flex-content {
        display: flex;
    }
    .scrollbar-demo-item {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100px;
        height: 50px;
        margin: 10px;
        text-align: center;
        border-radius: 4px;
        background: var(--el-color-danger-light-9);
        color: var(--el-color-danger);
    }
    .user-panel{
        overflow: hidden;
        color: #666666;
        font-size: 13px;
        z-index: 10;
        background: white;
        position: absolute;
        top: 60px;
        right: 1px;
        width: 300px;
        box-shadow: 0 0 0 1px lightgrey;
    }
    ul{
        overflow: inherit;
    }
    .sharp{
        margin: 0 10px;
        cursor: pointer;
    }
    .active{
        transform: rotate(180deg);
    }
    .user-panel li{
        border-bottom: 1px solid lightgray;
        width: 100%;
        padding: 10px 0 0;
    }
    .user-panel .header{
        border-bottom: 1px solid lightgray;
        width: 100%;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
    }
    .user-panel .foot{
        width: 100%;
        padding: 0 10px;
        height: 40px;
        line-height: 40px;
    }
</style>
